<template>
    <div>
        <div>
            <Row>

                <Col span="8">
                    姓名：<Input v-model="name" placeholder="" style="width: 200px" /></Col>

                <Col span="8">
                    身份证号：     <Input v-model="cardno" placeholder="" style="width: 200px" />
                </Col>
                <Col span="8">
                    <Button type="primary">搜索</Button>
                </Col>
            </Row>
        </div>
        <div style="margin-top: 10px">
            <Table border :columns="columns7" :data="data6"></Table>
        </div>
        <Modal v-model="modal1" title="迁移详情" @on-ok="update(formItem)" @on-cancel="modal1 = false" width="60">
            <Form :model="formItem" :label-width="80">
                <FormItem label="名字:" style="margin-left: 150px">
                    <Input v-model="formItem.name" placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="年纪:" style="margin-left: 150px">
                    <Input v-model="formItem.age" placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="身份证号:" style="margin-left: 150px">
                    <Input v-model="formItem.cardno" placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="原住地:" style="margin-left: 150px">
                    <Input v-model="formItem.home"  disabled  placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="现住地:" style="margin-left: 150px">
                    <Input v-model="formItem.nowhome" placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="原经办单位:" style="margin-left: 150px">
                    <Input v-model="formItem.unit"  disabled placeholder="" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="现经办单位:" style="margin-left: 150px">
                    <Select v-model="model2" style="width:200px">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>

    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      index: '',
      model2: '',
      cityList: [
        {
          value: '和平养老院',
          label: '和平养老院'
        },
        {
          value: '大东养老院',
          label: '大东养老院'
        },
        {
          value: '铁西养老院',
          label: '铁西养老院'
        },
        {
          value: '于洪养老院',
          label: '于洪养老院'
        },
        {
          value: '沈河养老院',
          label: '沈河养老院'
        }
      ],
      modal1: false,
      formItem: {},
      name: '',
      cardno: '',
      columns7: [
        {
          title: '名字',
          key: 'name',
          width: 100
        },
        {
          title: '年纪',
          key: 'age',
          width: 100
        },
        {
          title: '状态',
          key: 'state',
          width: 100
        },
        {
          title: '身份证号',
          key: 'cardno'
        }, {
          title: '居住地',
          key: 'home'
        },
        {
          title: '经办单位',
          key: 'unit'
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  display: params.row.state === '未迁移' ? 'inline' : 'none'
                },
                on: {
                  click: () => {
                    this.show(params.row)
                  }
                }
              }, '迁移')
            ])
          }
        }
      ],
      data6: [
        { name: '于淼', age: '65', cardno: '2130491953438382904', home: '辽宁省沈阳市和平区南市场街道', unit: '和平养老院', state: '未迁移' },
        { name: '张恒', age: '60', cardno: '213449195638382904', home: '辽宁省沈阳市沈河区中山路38号', unit: '沈河养老院', state: '未迁移' },
        { name: '王博', age: '62', cardno: '2100049195638382234', home: '辽宁省沈阳市于洪区于洪广场', unit: '于洪养老院', state: '未迁移' },
        { name: '戴学林', age: '68', cardno: '201049195238382904', home: '辽宁省沈阳市铁西区铁西广场', unit: '铁西养老院', state: '未迁移' }
      ]
    }
  },
  methods: {
    show (param) {
      console.log(param, '111111111')
      this.modal1 = true
      this.formItem = param
      this.index = param._index
    },
    update (param) {
      if (confirm('确定要通过迁移吗') === true) {
        this.modal1 = false
        this.data6[this.index].state = '已迁移'
      }
    }

  }
}
</script>

<style scoped>

</style>
